---
id: custom-tool
sidebar_position: 5
---

import BrowserWindow from '@site/src/theme/BrowserWindow';

# Custom tool

To support custom scenario, you can provide a `compile` function
and wire it up as you please.

In this example, we use [cowsay](https://github.com/piuccio/cowsay) to create silly looking cows.

```js title="./docusaurus.config.js"
const { say } = require("cowsay")

...
    compileCode: {
        langs: [
        ...,
// highlight-start
        {
            lang: "cowsay",
            compile: async (text, langOptions) => ({
                stdout: say({ text })
            })
        }
// highlight-end
    ]}
```

Let's take a look at this example in action.

````markdown
```cowsay
hello
```
````

When rendered in the docs, this snippet looks like any other code snippe.
But you'll also notice an additional box
underneath with the capitalized text.

<BrowserWindow>

```cowsay
hello
```

</BrowserWindow>
